<template>
  <el-dialog :model-value="true" title="课程修改" width="80%" :close-on-click-modal="false" :before-close="handleClose">
    <el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="课程名称" prop="name">
            <el-input v-model="formData.name" maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="课程类别" prop="category">
            <el-input v-model="formData.category" maxlength="32" placeholder="填写java、vue、python等" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="付费类型" prop="paid_type">
            <paid-type-select v-model="formData.paid_type" :empty="false"></paid-type-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="价格" prop="price">
            <el-input v-model="formData.price" type="number" maxlength="8">
              <template #append>元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="讲师" prop="lecturer">
            <el-input v-model="formData.lecturer" maxlength="32" placeholder="填写讲师姓名"/>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="状态" prop="status">
            <status-select v-model="formData.status" :empty="false"></status-select>
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="封面图" prop="cover">
            <image-upload v-model="formData.cover" />
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="课程描述" prop="description">
            <el-input type="textarea" v-model="formData.description" maxlength="256" :rows="5" resize="none" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="warning" @click="handleClose">取消</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click.prevent="handleUpdate(myForm)" native-type="submit">修改</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref, defineEmits,watch } from "vue";
import StatusSelect from "@/components/public/StatusSelect.vue";
import ImageUpload from "@/components/public/ImageUpload.vue"
import PaidTypeSelect from "./PaidTypeSelect.vue";
import { FormRules, FormInstance } from "element-plus";
import request from "@/utils/request";

const props = defineProps({
  // 行数据
  rowData: {
    type: Object,
    required: true,
  }
});

// 记录是否修改了数据
let updateData = false;

// 定义事件触发器
const emits = defineEmits(["close"]);

// 接收表单参数
const formData = reactive({
  name: "",
  cover: "",
  price: 0,
  paid_type: "0",
  lecturer: "",
  category: "",
  description: "",
  status: "0"
});

const myForm = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  category: [{ required: true, message: "请输入价格", trigger: "blur" }],
  lecturer: [{ required: true, message: "请输入讲师", trigger: "blur" }],
});

const handleClose = () => {
  emits("close", updateData);
  updateData = false;
};

const handleReset = () => {
  // 重置表单
  Object.assign(formData,props.rowData);
}

const handleUpdate = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 发起请求
    request({ 
      data: formData, 
      method: "POST", 
      url: "/course/update" }).then(res => {
      if (res.data.code > 0) {
        updateData = true;
        alert("修改成功");
        handleClose();
      } else {
        alert("修改失败");
      }
    }, () => {
      alert("修改失败");
    })
  });
}

// 侦听父传子的参数变化
watch(() => props.rowData,(newVal) => {
  if (!newVal) {
    return;
  }
  // 将newVal的值合并到formData中，然后组件便根据formData填充值
  Object.assign(formData,newVal);
},{immediate: true})
</script>

<style scoped lang="scss">
</style>